<template>
    <div class="selectedTab">
        <ul class="selected-Tab-content" @click="handleClick">
            <slot></slot>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                elms:[],
                selected:""
            }
        },
        created(){
            this.$bus.on('initialize',this.initialize);
        },
        mounted(){
            this.initialize();
        },
        methods:{
            initialize(){
                var that = this;
                this.elms = new Array();
                this.$slots.default.forEach(item=>{
                    if(item.elm.nodeType == 1){
                        this.elms.push(item.elm);
                    }
                })
                //获取该组件下面的所有子组件元素

                if(this.elms[0]){
                    this.selected = this.elms[0].id;
                    this.$children.forEach(item=>{
                        item.selected = that.selected
                    })
                }
            },
            handleClick(e){
                var that = this;
                
                this.elms.forEach(item=>{
                    if(item.contains(e.target)){
                        this.selected = item.id
                    }
                })
                //判断当前选中的是哪个li

                this.$children.forEach(item=>{
                    item.selected = that.selected
                })
                //更改样式


                this.$emit('input',this.selected)
                //让引用该组件的父组件获得当前选中的li的id
            }
        }
    }
</script>